<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
        <script src="./statics/jquery.js"></script>
        <style>
            #test{
                width: 100px;
                height: 100px;
                background: red
            }
            .translate{
                -webkit-transform: translateX(400%);
                -webkit-transition-duration:1s; 
            }
        </style>
        <script>
            $(function(){
                $('button').click(function(){
                    $('#test').toggleClass('translate')
                })
            })
        </script>
    </head>
    <body>
        <div id="test"></div>
        <button>OK</button>
    </body>
</html>
